<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="10" justify="space-between">
        <el-col :span="18">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input
                v-model="seachFrom.planName"
                placeholder="输入计划名称进行搜索"
                :prefix-icon="Search"
                @change="getphyTrainingPlan"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <el-tree-select
               @change="getphyTrainingPlan"
                placeholder="选择单位"
                v-model="seachFrom.officeId"
                :data="treeData.treeList"
                :render-after-expand="false"
                check-strictly
                :props="{
                  value: 'id', // ID字段名
                  label: 'name', // 显示名称
                  children: 'children', // 子级字段名
                }"
              />
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="2" :offset="4">
          <el-button type="primary">创建计划</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top:15px;" v-loading="loading">
      <el-table :data="tableData" :stripe="true" style="width: 100%" height='55vh' table-layout='auto'      @sort-change="sortChangeHandle" >
      <el-table-column prop="planName" label="名称" />
      <el-table-column prop="officeName" label="单位" />
      <el-table-column prop="trainingStartTime" label="训练开始时间" sortable='custom'>
        <template v-slot="{ row }">
          <div>
            {{ row.trainingStartTime.split(' ')[0] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="trainingEndTime" label="训练结束时间"  sortable='custom'> 
        <template v-slot="{ row }">
          <div>
            {{ row.trainingEndTime.split(' ')[0] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateDate" label="更新时间"></el-table-column>
      <el-table-column  label="操作">
        <template v-slot="{row}">
        <el-button size="small"
          >查看</el-button
        >
        <el-button
          size="small"
          >修改</el-button
        >
   <el-dropdown @command='command($event,row)'>
    <span class="el-dropdown-link">
      <el-button
          style='margin-left:12px;'
          size="small"
          >更多</el-button
        >
    </span>
        <template #dropdown>
          <el-dropdown-menu  	>
            <el-dropdown-item command='copy'>复制为新计划</el-dropdown-item>
            <el-dropdown-item command='import'>导出训练计划</el-dropdown-item>
            <el-dropdown-item command='delete'>删除训练计划</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      </template>
      </el-table-column>
    </el-table>
    </el-card>
    <Pagination
      :pageSize="seachFrom.pageSize"
      :pageTotal="total"
        @pageFunc="pageFunc"
      />
  </div>
</template>

<script setup lang='ts'>
import Pagination from '@/components/Pagination/index.vue'
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, computed } from 'vue'
import { anitTreeStore } from '@/store/modules/anitTree'
import { phyTrainingPlan ,delTrainingPlan } from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
// import {seachFromType} from './newPlayType'
const treeData = anitTreeStore()
const loading = ref()
if (treeData.treeList.length < 1) {
  treeData.getTreeList()
}
const seachFrom = reactive({
  officeId: '',
  planName: '',
  pageNo: 1,
  pageSize:10 ,
  orderBy:''
})
const tableData = ref([])
const total = ref()
const getphyTrainingPlan=async()=>{
  loading.value = true
const result:any = await phyTrainingPlan(seachFrom)
 tableData.value = result.page.list
    total.value = result.page.count
    loading.value = false
// .then((data) => {
//     console.log(data)
//     tableData.value = data.page.list
//     total.value = data.page.count
// })
} 
const pageFunc = (data:any) => {
  seachFrom.pageSize = data.pageSize;
  seachFrom.pageNo = data.pageNum;
  getphyTrainingPlan();  // 触发获取数据函数
};
        //排序
const sortChangeHandle = function (obj:any) {
  if (obj.order === 'ascending') {
    seachFrom.orderBy = obj.prop + ' asc'
  } else if (obj.order === 'descending') {
    seachFrom.orderBy = obj.prop + ' desc'
  } else {
    seachFrom.orderBy = ''
  }
  getphyTrainingPlan()
}
//更多
const command=(e:any,row:any)=>{
  if(e=='copy'){}
  if(e=='import'){}
  if(e=='delete'){
    open(row.id)
  }
}
const open = (id:string) => {
  ElMessageBox.confirm(
    '确定要删除么?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
     await delTrainingPlan({ids:id})
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getphyTrainingPlan()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
getphyTrainingPlan()
</script>
<style scoped lang='scss'>
</style>
